<template>
	<div class="configuration-parameter">
		<div class="trigger-action-application">
			<i class="trigger-action-application-icon iconfont" :class="currentNodeOptions.appLogo" v-if="currentNodeOptions.appLogo ? currentNodeOptions.appLogo.includes('icon') : ''"></i>
			<img class="trigger-action-application-icon iconfont" :src="currentNodeOptions.appLogo" v-else-if="currentNodeOptions.appLogo" />
			<div class="trigger-action-application-icon iconfont" v-else>
				<i>{{ currentNodeOptions.appName.substring(0, 2) }}</i>
			</div>
			<div class="trigger-action-application-right">
				<div class="trigger-action-application-name">
					{{ currentNodeOptions.appName }}
				</div>
				<div class="trigger-action-application-info">
					<span>执行动作：{{ currentNodeOptions.selectObjName }}</span>
				</div>
			</div>
		</div>
		<del-config v-if="currentNodeOptions.apiAction === 'DELETE'" class="configuration-parameter-content"/>
		<edit-config v-else-if="currentNodeOptions.apiAction === 'UPDATE'" class="configuration-parameter-content"/>
		<new-config v-else-if="currentNodeOptions.apiAction === 'INSERT'" class="configuration-parameter-content"/>
		<select-config v-else-if="currentNodeOptions.apiAction === 'SELECT'" class="configuration-parameter-content"/>
	</div>
</template>

<script>
import delConfig from './components/delConfig.vue';
import editConfig from './components/editConfig.vue';
import newConfig from './components/newConfig.vue';
import selectConfig from './components/selectConfig.vue'
import state from '@src/modules/trigger/view/setting/util/state.js'

export default {
	name: 'ConfigurationParameter',
	computed: {
		state() {
			return state;
		},
		currentNodeOptions() {
			return this.state.currentNodeInfoFront.options;
		}
	},
	components: {
		delConfig,
		editConfig,
		newConfig,
		selectConfig
	},
};
</script>

<style scoped lang="scss">
.configuration-parameter {
	height: calc(100% - 100px);
	padding: 16px 24px;
	.trigger-action-application {
		display: flex;
		align-items: center;
		padding: 8px 0;
		margin-bottom: 8px;

		.trigger-action-application-icon {
			width: 40px;
			height: 40px;
			border-radius: 8px;
			font-size: 24px;
			background: var(--color-primary-light-1);
			color: var(--color-primary-light-6);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 8px;
			i {
				font-size: 12px;
				font-style: normal;
			}
		}

		.trigger-action-application-right {
			.trigger-action-application-name {
				font-size: 14px;
			}

			.trigger-action-application-info {
				font-size: 12px;
				color: #8c8c8c;
			}
		}
	}

	&-content {
		height: calc(100% - 20px);
		overflow: auto;
	}
}
</style>
